<template>
  <div class="my">
    <header>
      <SvgIcon name="back" className="back" @click="backHome"></SvgIcon>
      <h2 class="title">我的</h2>
    </header>
    <main>
      <div class="my__btn" @click="logout">退出</div>
    </main>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import storage from '../../utils/storage'
import SvgIcon from '../../components/SvgIcon.vue'

export default {
  components: { SvgIcon },
  setup() {
    const store = useStore()
    const router = useRouter()

    const logout = () => {
      store.commit('logout')
      storage.clearAll()
      router.push('/login')
    }
    const backHome = () => {
      router.go(-1)
    }
    return {
      logout,
      backHome
    }
  }
}
</script>

<style lang="scss" scoped>
.my {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    height: 0.4rem;
    background-color: #ccc;
    position: relative;
    .back {
      position: absolute;
      left: 0.1rem;
      top: 0.1rem;
      font-size: 0.18rem;
      color: #f60;
    }
    .title {
      margin: 0;
      text-align: center;
      line-height: 0.4rem;
    }
  }
  main {
    height: 0;
    flex: 1;
    padding: 0 0.18rem;
    .my__btn {
      text-align: center;
      margin: 0.32rem 0 0.16rem;
      background: $hightlight-fontColor;
      box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 0, 0, 0.2);
      border-radius: 0.04rem;
      color: $bgColor;
      font-size: 0.16rem;
      height: 0.48rem;
      line-height: 0.48rem;
    }
  }
}
</style>
